<template>
    <div id="chart" style="width: 100%; height: 80vh;" />
</template>
  
<script>
import resize from './mixins/resize'
import { deleteconsanguinity, fetchconsanguinityList, exportconsanguinity } from '@/api/demo/consanguinity'
export default {
    mixins: [resize],

    // props: ['nodeList', 'linkList'],
    data() {
        return {
            chart: null,
            list: [],
            searchedValue: '',
            nodeList: [],
            linkList: []
        }
    },
    mounted() {
        this.tableName = ''
        fetchconsanguinityList().then((response) => {
            this.nodeList = []
            this.linkList = []
            response.data.data.forEach(item => {
                let nodeObj = {
                    name: item.tableName,
                    id: item.id,
                    description: item.description ? item.description==='null'? '暂无描述':item.description : '暂无描述',
                    sourceName: item.sourceName
                }

                if (item.outflows.length > 0) {
                    item.outflows.forEach(ite => {
                        let linkObj = {
                            name: ite.roles[0],
                            "target": ite.tableConsanguinity.id.toString(),
                            "source": item.id.toString()
                        }
                        this.linkList.push(linkObj)
                    })
                }
                this.nodeList.push(nodeObj)

            })
            this.init();
        })

    },
    beforeDestroy() {
        this.tableName = ''
        // if (!this.chart) {
        //     return false
        // }
        // this.chart.dispose()
        // this.chart = null
    },
    methods: {
        seach(name,id) {
            fetchconsanguinityList({ tableName: name,sourceId:id }).then(res => {
                console.log(res, 'tableLists')
                this.nodeList = []
                this.linkList = []
                res.data.data.forEach(item => {
                    let nodeObj = {
                        name: item.tableName,
                        id: item.id,
                        description: item.description ? item.description==='null'? '暂无描述':item.description : '暂无描述',
                        sourceName: item.sourceName
                    }

                    if (item.outflows.length > 0) {
                        item.outflows.forEach(ite => {
                            let linkObj = {
                                name: ite.roles[0],
                                "target": ite.tableConsanguinity.id.toString(),
                                "source": item.id.toString()
                            }
                            this.linkList.push(linkObj)
                        })
                    }
                    this.nodeList.push(nodeObj)

                })
                this.init();
            })
            // if (name) {
            //     this.nodeList.forEach(node => {
            //         if (name && node.name.toLowerCase().indexOf(name.toLowerCase()) > -1) {
            //             node.itemStyle = {
            //                 color: 'red'
            //             };
            //         }
            //     })
            // } else {
            //     this.nodeList.forEach(node => {
            //         node.itemStyle = {};
            //     })
            // }
            // this.init()
        },
        init() {
            let myChart = this.$echarts.init(document.getElementById('chart'))
            // 第二处 - 将主要逻辑封装为init函数（注意下面的nodes，使用JSON.parse(JSON.stringify(nodes))）
            let data = {
                nodes: JSON.parse(JSON.stringify(this.nodeList)),
                links: this.linkList,
            }
            data.links.forEach(link => {
                link.label = {
                    align: 'center',
                    fontSize: 12
                };
            });

            let option = {
                title: {
                    text: '数据血缘',
                    textStyle: {
                        color: "#fff",
                        margin: ['20', '20'],
                        fontSize: '20'
                    },
                    y: "3%",
                    x: "3%"
                },
                backgroundColor: '#000033',
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (params.dataType == 'node') {
                            var info = '<p style="font-size:12px">数据源名称：' + params.data.sourceName + '</p>'
                            info = info + '<p style="font-size:12px">表名：' + params.name + '</p>'
                            info = info + '<p style="font-size:12px">描述：' + params.data.description + '</p>'
                            return info;
                        }
                        if (params.dataType == 'edge') {
                            var info = '<p style="font-size:14px">' + params.data.name + '</p>'
                            return info;
                        }
                    },
                    backgroundColor: "#3791ff", //提示标签背景颜色 
                    textStyle: {
                        color: "#fff"
                    } //提示标签字体颜色 
                },
                series: [{
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 40,
                    draggable: true,
                    roam: true,
                    focusNodeAdjacency: true,
                    edgeSymbol: ['', 'arrow'],
                    // edgeSymbolSize: [80, 10],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 20
                            },
                            formatter(x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        show: true,
                    },
                    force: {
                        repulsion: 1000,
                        edgeLength: 150
                    },
                    data: JSON.parse(JSON.stringify(this.nodeList)),
                    links: this.linkList
                }]
            }
            // 第四处：
            myChart.setOption(option);
        }
    },
}
</script>
  